<template>
  <div class="common-layout">
      <el-container>
        <!-- Header -->
        <el-header class="header">
          <h2>个人中心</h2>
        </el-header>

        <el-container>
          <!-- Aside (菜单) -->
          <el-aside width="200px" class="aside">
            <el-menu :default-active="activeMenu" @select="handleMenuSelect">
              <el-menu-item index="1">查看订单</el-menu-item>
              <el-menu-item index="2">查看收藏夹</el-menu-item>
            </el-menu>
          </el-aside>

          <!-- Main -->
          <el-main class="main">
            <div v-if="activeMenu === '1'">
              <el-button-group>
                <el-button @click="setOrderStatus(1)">待支付</el-button>
                <el-button @click="setOrderStatus(2)">待发货</el-button>
                <el-button @click="setOrderStatus(3)">待收货</el-button>
                <el-button @click="setOrderStatus(5)">待评价</el-button>
              </el-button-group>
              <el-table :data="orderList" style="margin-top: 20px;">
                <el-table-column label="订单ID" prop="orderId"></el-table-column>
                <el-table-column label="订单状态" prop="status"></el-table-column>
                <el-table-column label="订单总额" prop="payment"></el-table-column>
                <el-table-column label="买家昵称" prop="buyerNick"></el-table-column>
                <el-table-column label="创建时间" prop="createTime"></el-table-column>
              </el-table>
            </div>
            <div v-else-if="activeMenu === '2'">
              <p>这里是收藏夹内容</p>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>

<script>
import axios from 'axios' // 引入 axios
export default {
  data () {
    return {
      activeMenu: '1', // 默认选中的菜单项（查看订单）
      currentStatus: '1', // 当前选择的订单状态为未支付
      orderList: [], // 当前显示的订单列表
      userId: null, // 当前用户 ID，初始为 null
      page: 1, // 当前页码，默认为 1
      pageSize: 10 // 每页显示的订单数，默认为 10
    }
  },
  methods: {
    // 处理菜单选择
    handleMenuSelect (index) {
      this.activeMenu = index
      if (index === '1') {
        this.fetchOrdersByStatus('1') // 默认显示待支付订单
      }
    },

    // 设置当前订单状态并更新订单列表
    setOrderStatus (status) {
      this.currentStatus = status
      this.fetchOrdersByStatus(status)
    },
    // 获取订单状态的文本描述
    getStatusText (status) {
      const statusMap = {
        1: '待支付',
        2: '待发货',
        3: '待收货',
        5: '待评价'
      }
      return statusMap[status] || '未知状态'
    },
    // 从后端获取订单数据
    async fetchOrdersByStatus (status) {
      try {
        // 调用后端 API 获取订单数据
        const response = await axios.get('http://localhost:8088/orders/list', {
          params: {
            status, // 订单状态（例如：待支付、待发货、待收货、待评价）
            userId: this.userId, // 当前用户 ID
            page: this.page, // 当前页码
            pageSize: this.pageSize, // 每页显示的条数
            orderId: null // 如果需要，可以传递特定的订单 ID（默认为 null，表示没有指定）
          }
        })
        // 假设返回的数据格式如下
        // { "status": "success", "data": [...] }
        console.log(response)
        if (response.status === 200) {
          console.log('22222')
          this.orderList = response.data.map(order => ({
            ...order,
            status: this.getStatusText(order.status)
          })) // 将返回的数据赋值给 orderList
        }
      } catch (error) {
        console.error('获取订单数据失败:', error) // 捕获错误并打印
      }
    }
  },
  mounted () {
  // 从 localStorage 获取当前用户的 userId
    const userData = JSON.parse(localStorage.getItem('userInfo')) // 假设登录信息保存在 localStorage 的 'userInfo' 键下
    if (userData && userData.userId) {
      this.userId = userData.userId // 设置 userId
    }
    // 初始化时默认显示待支付订单
    this.fetchOrdersByStatus('1')
  }
}
</script>

<style scoped>
.common-layout {
  height: 100vh;
}

.header {
    height: 70%;
  text-align: center;
  font-size: 24px;
  color: #fff;
  background-color: #409EFF;
}

.aside {
  background-color: #f4f4f4;
}

.menu {
  margin-top: 20px;
}

.main {
  padding: 20px;
}

.el-button-group {
  margin-bottom: 20px;
}

.el-table {
  width: 100%;
}
  </style>
